<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="70%" @close="handleClose">
    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
      <template #tableTitle>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicDrawer>
  <DictItemModal @register="registerModal" @success="reload()" :dictId="dictInfo?.id" :typeCode="typeCode" />
</template>
<script lang="ts" setup>
  import { ref, unref, computed } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { BasicTable, useTable, TableAction } from "/@/components/Table"
  import { useModal } from "/@/components/Modal"
  import { useDesign } from "/@/hooks/web/useDesign"
  import DictItemModal from "./DictItemModal.vue"
  import { dictItemColumns, dictItemSearchFormSchema } from "../dict.data"
  import { itemList, deleteItem, getDict } from "/@/api/infra/dict"
  import { useMessage } from "/@/hooks/web/useMessage"
  const { createMessage } = useMessage()
  const { prefixCls } = useDesign("row-invalid")
  const dictInfo = ref<any>()
  const typeCode = ref("")

  const emit = defineEmits(["close", "register"])

  const [registerModal, { openModal }] = useModal()
  const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
    dictInfo.value = await getDict({ typeCode: data.typeCode })
    if (!dictInfo.value) {
      createMessage.error('查询字典信息失败')
      closeDrawer()
      return
    }
    typeCode.value = data.typeCode
    setProps({ searchInfo: { dictId: unref(dictInfo.value.id), typeCode: unref(typeCode) } })
    reload()
  })

  const getTitle = computed(() => (dictInfo.value ? `字典 ${dictInfo.value.dictName}[${typeCode.value}] 列表` : "字典列表"))

  const [registerTable, { reload, setProps }] = useTable({
    api: itemList,
    columns: dictItemColumns,
    rowKey: "id",
    formConfig: {
      baseColProps: { lg: 8, md: 8 },
      labelAlign: "right",
      labelWidth: 80,
      wrapperCol: {},
      schemas: dictItemSearchFormSchema,
      autoSubmitOnEnter: true,
    },
    striped: true,
    useSearchForm: true,
    bordered: false,
    showIndexColumn: false,
    canResize: false,
    immediate: false,
    actionColumn: {
      width: 100,
      title: "操作",
      dataIndex: "action",
      slots: { customRender: "action" },
      fixed: undefined,
    },
  })

  /**
   * 新增
   */
  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    })
  }

  function handleClose() {
    emit("emit")
  }

  /**
   * 编辑
   */
  function handleEdit(record) {
    openModal(true, {
      record,
      isUpdate: true,
    })
  }

  /**
   * 删除
   */
  async function handleDelete(record) {
    await deleteItem({ id: record.id }, reload)
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: "编辑",
        disabled: !record.hasPerm,
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        color: "error",
        disabled: !record.hasPerm,
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }
  function getRowClassName(record) {
    return record.status > 1 ? prefixCls : ""
  }
</script>
<style scoped lang="less">
  @prefix-cls: ~"@{namespace}-row-invalid";

  :deep(.@{prefix-cls}) {
    background: #f4f4f4;
    color: #bababa;
  }
</style>
